<template>
    <div class="person">
        <h2>{{sum}}</h2>
        <button @click="changeSum()">改变sum的值</button>
        <br/>
        <img v-for="item,index in imgSrc" :src="item" :key="index"/>
        <br/>
        <button @click="addImg">添加图片</button>
   
    </div>

</template>

<script setup lang="ts" name="Person">
import useSum from '@/hooks/useSum';
import useImg from '@/hooks/useImg';
let {sum,changeSum}=useSum()
let {imgSrc,addImg}=useImg()


</script>
<!-- 在style标签中，加上scoped属性，则表示当前的样式做作用于当前页面 -->
<style scoped>
.person{
    background-color: lightseagreen;
	box-shadow: 6px 6px 12px gray;
	border-radius: 6px;
	line-height: 40px;
	padding:10px;

}
img{
    height: 200px;
    width: 200px;
}
</style>